<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link href="${context}/widget/bootstrap/css/bootstrap.min.css" rel="stylesheet">
   <script src="/scripts/jquery.min.js"></script>
   <script src="${context}/widget/bootstrap/js/bootstrap.min.js"></script>
<script src="${context}/jslib/jquery/jquery-1.9.1.js"></script>
<script src="${context}/demo/js/echarts.js"></script>
<script src="jquery-1.4.3.js"></script>
<title>Insert title here</title>

<!-- 
<link rel="stylesheet" href="../css/search.css?_=<%=System.currentTimeMillis() %>" />
<script type="text/javascript" src="../js/jquery-1.11.1.min.js?_=<%=System.currentTimeMillis() %>"></script>
<script type="text/javascript" src="../js/base64.js?_=<%=System.currentTimeMillis() %>"></script>
<script type="text/javascript" src="../js/searchCaseTree.js?_=<%=System.currentTimeMillis() %>"></script>
<script type="text/javascript" src="../js/search.js?_=<%=System.currentTimeMillis() %>"></script>
<script type="text/javascript" src="../js/querySuggestion.js?_=<%=System.currentTimeMillis() %>"></script>
<script type="text/javascript" src="../jslib/json/json2.js? =<%=System.currentTimeMillis() %>"></script>
<script type="text/javascript" src="../js/menuItem.js?_=<%=System.currentTimeMillis() %>"></script>
 -->
</head>
<body>
<script type="text/javascript">
$(function(){
	
createWordCloud();
createPie();
});
var context="${context}";
	function find(s){
		alert(s)
		$.ajax({
			'url':context+'/ElsSearchDemo',
			'data':data,
			'method':'post',
			'dataType':'json',
			'success':function(result){
				createWordCloud(result);
				createPie(result);
			}
		});
	}
	
	
	
	function createRandomItemStyle() {    //自浮云图表，字符串随机颜色
	    return {
	        normal: {
	            color: 'rgb(' + [
	                Math.round(Math.random() * 160),
	                Math.round(Math.random() * 160),
	                Math.round(Math.random() * 160)
	            ].join(',') + ')'
	        }
	    };
	}
	
	
		function createWordCloud(v){//创建字符云图表
			/*
			财产清单     0.7425121
			同居关系析产、子女抚养纠纷     0.67300576
			出生医学证明     0.67057085
			共同财产清单     0.66906583
			户籍信息     0.6584705
			出生证明     0.65211296
			常住人口登记卡     0.6413183
			出生证     0.6328526
			协助查询户籍函     0.63273776
			生效证明     0.6303751
			*/
			var d =[
			         "财产清单",
		            "同居关系析产、子女抚养纠纷",
		            "出生医学证明", 
		            "共同财产清单", 
		           "户籍信息",
		             "出生证明", 
		            "常住人口登记卡",
		           "出生证",
		           "生效证明", 
		           "户籍信息"
			        ];
			var date = [
			            	{ name: "财产清单", value: 0.7425121},
				            { name: "同居关系析产、子女抚养纠纷", value: 0.67300576},
				            { name: "出生医学证明", value: 0.67057085},
				            { name: "共同财产清单", value: 0.66906583},
				            { name: "户籍信息", value: 0.6584705},
				            { name: "户籍信息", value: 0.6584705},
				            { name: "出生证明", value: 0.65211296},
				            { name: "常住人口登记卡", value: 0.6413183},
				            { name: "出生证", value: 0.6328526},
				            { name: "生效证明", value: 0.6303751}
			            ];
				require.config({
					paths:{
						echarts:'./js'
					}
				});
				require(
					 [	
	                	'echarts',
	                	'echarts/chart/line',
			            'echarts/chart/bar',
			            'echarts/chart/scatter',
			            'echarts/chart/k',
			            'echarts/chart/pie',
			            'echarts/chart/radar',
			            'echarts/chart/force',
			            'echarts/chart/chord',
			            'echarts/chart/gauge',
			            'echarts/chart/funnel',
			            'echarts/chart/eventRiver',
			            'echarts/chart/venn',
			            'echarts/chart/treemap',
			            'echarts/chart/tree',
			            'echarts/chart/wordCloud',
			            'echarts/chart/heatmap',
			            'echarts/chart/map'
	                ],
	             	function (ec){
	             		 var myChart = ec.init(document.getElementById('wordCloud'));
	             		var option = {
							    title: {
							        text: 'Google Trends',
							        link: 'http://www.google.com/trends/hottrends'
							    },
							    tooltip: {
							        show: true
							    },
							    series: [{
							        name: 'Google Trends',//鼠标悬浮，提示显示
							        type: 'wordCloud',
							        size: ['80%', '80%'],//宽度与高度设置
							        //textRotation : [0, 45, 90, -45],
							        textRotation:[0,30,60,90,120],//字符串随机倾斜角度
							        textPadding: 5, //字符串内边
							        autoSize: {
							            enable: true,
							            minSize: 14 //最小字体大小
							        },
							        data: date
							    }]
							};
	             		
	             	myChart.setOption(option);	
	             		
	             	}
				);
		}
		
		
		function createPie(v){
			var d =[
			         "财产清单",
		            "同居关系析产、子女抚养纠纷",
		            "出生医学证明", 
		            "共同财产清单", 
		           "户籍信息",
		             "出生证明", 
		            "常住人口登记卡",
		           "出生证",
		           "生效证明", 
		           "户籍信息"
			        ];
			var date = [    //标注图形数据
			                { name: "财产清单", value: 0.7425121},
				            { name: "同居关系析产、子女抚养纠纷", value: 0.67300576},
				            { name: "出生医学证明", value: 0.67057085},
				            { name: "共同财产清单", value: 0.66906583},
				            { name: "户籍信息", value: 0.6584705},
				            { name: "出生证明", value: 0.65211296},
				            { name: "常住人口登记卡", value: 0.6413183},
				            { name: "出生证", value: 0.6328526},
				            { name: "生效证明", value: 0.6303751},
				            { name: "户籍信息", value: 0.6584705}
			            ];
			
			
			require.config({
	            paths: {
	                echarts: './js'
	                // echarts: 'http://echarts.baidu.com/build/dist'
	            }
	        });
	         require(
	            [
	                'echarts',
	                'echarts/chart/funnel',   // 按需加载所需图表，如需动态类型切换功能，别忘了同时加载相应图表
	                'echarts/chart/pie',
	                'echarts/chart/line'
	            ],
	            function (ec) {
	                var myChart = ec.init(document.getElementById('pie'));
	              var  option = {
								    title : {						//标题
								        text: '某站点用户访问来源',    //主标题文本，'\n'指定换行
								        link:'demoPie2.html',	 //主标题文本超链接
								        subtext: '纯属虚构',        //副标题文本，'\n'指定换行
								        sublink:'demoPie3.html', //副标题文本超链接
								        x:'center'                //水平安放位置，默认为左侧，可选为：'center' | 'left' | 'right' | {number}（x坐标，单位px）
								    },
								    tooltip : {	//提示框，鼠标悬浮交互时的信息提示
								    	show:true,		//显示策略，可选为：true（显示） | false（隐藏）
								        showContent:true,
								        trigger: 'item',	//触发类型，默认数据触发，见下图，可选为：'item' | 'axis'
								        formatter: "{a} <br/>{b} : {c} ({d}%)"
								    },
								    legend: {		//图例，每个图表最多仅有一个图例，混搭图表共享
								    	show:true,
								        orient : 'vertical',  //布局方式，默认为水平布局，可选为：'horizontal' | 'vertical'
								        x : 'left',		//水平安放位置，默认为全图居中，可选为：'center' | 'left' | 'right' | {number}（x坐标，单位px）
								        y :	'top',		//垂直安放位置，默认为全图顶端，可选为：'top' | 'bottom' | 'center' | {number}（y坐标，单位px）
								        data:d
								        //图例内容数组，数组项通常为{string}，每一项代表一个系列的name，默认布局到达边缘会自动分行（列），传入空字符串''可实现手动分行（列）。
								    },
								    toolbox: { 		//工具箱，每个图表最多仅有一个工具箱
								        show : true,
								        orient : 'horizontal',  //布局方式，默认为水平布局，可选为：'horizontal' | 'vertical'
								       showTitle:true,		//是否显示工具箱文字提示，默认启用
								       feature : {    //启用功能，目前支持feature见下，工具箱自定义功能回调处理，try this »
								            mark : {show: true},//辅助线标志
								            dataView : {show: true, readOnly: false},//数据视图    . readOnly true : 只读的。
								            magicType : {
								            //动态类型切换，支持直角系下的折线图、柱状图、堆积、平铺转换，上图icon左数6~14，分别是切换为堆积，
								            // 切换为平铺，切换折线图，切换柱形图，切换为力导向布局图，切换为和弦图，切换为饼图，切换为漏斗图
								                show: true,
								                type: ['pie', 'funnel'],//'line', 'bar', 'stack', 'tiled', 'force', 'chord', 'pie', 'funnel'
								                option: {     //可传入切换是动态修改的配置，将复写series内的数组项
								                    funnel: {
								                        x: '25%',
								                        width: '50%',
								                        funnelAlign: 'left',
								                        max: 1548
								                    }
								                }
								            },
								            restore : {show: true},//还原，复位原始图表，上图icon右数2
								            saveAsImage : {show: true}//保存图片（IE8-不支持），上图icon最右，可设置更多属性
								        }
								    },
								    calculable : true,//是否启用拖拽重计算特性，默认关闭，相关的还有 calculableColor， calculableHolderColor， nameConnector， valueConnector）
								    series : [
								        {
								            name:'访问来源',//系列名称，如启用legend，该值将被legend.data索引相关
								            type:'pie',//图表类型，必要参数！如为空或不支持类型，则该系列数据不被显示。可选为：
														//'line'（折线图） | 'bar'（柱状图） | 'scatter'（散点图） | 'k'（K线图）
														//'pie'（饼图） | 'radar'（雷达图） | 'chord'（和弦图） | 'force'（力导向布局图） | 'map'（地图）
								            radius : '55%',//半径，支持绝对值（px）和百分比，百分比计算比，min(width, height) / 2 * 75%， 传数组实现环形图，[内半径，外半径]
								            //相对于包裹图表的div。直径所占的百分比。
								            center: ['50%', '60%'],//圆心坐标，支持绝对值（px）和百分比，百分比计算min(width, height) * 50%.
								           	//左上角开始算
								           data:date
								        }
								    ]
								};
	                myChart.setOption(option);
	            }
	        );
		}
		
</script>
<div>
	<!-- daohanglan_left
	<div style="width: 25%;float: left;">
	<p>垂直的胶囊式导航菜单</p>
	<ul class="nav nav-pills nav-stacked">
	   <li class="active"><a href="#">Home</a></li>
	   <li><a href="javascript:find(1);">SVN</a></li>
	   <li><a href="javascript:find(1);">iOS</a></li>
	   <li><a href="javascript:find(1);">VB.Net</a></li>
	   <li><a href="javascript:find(1);">Java</a></li>
	   <li><a href="javascript:find(1);">PHP</a></li>
	</ul>
	</div>
	
	 -->
<script type="text/javascript">
$("body").on("click","ul.menuitem_ul span",function(){
	_this=this;
	$(_this).closest("ul").find("li").fadeToggle();	//收放
});
</script>
<style>
*{margin:0;padding:0;} 
.menuCount{
	text-align: center;
	height: 50px;
	font-size: 40px;
}
ul{
	
	margin-left: 0px;
}
ul span{
	display:block;
	background:black;
	font-size:32px;
	height: 40px;
	text-align: center;
	position: relative;
	color: white;	
}
ul li{
	
	list-style: none;
	
}
div.sr-menu{
	background: #979A9A;
	overflow: auto;
	height: 630px;
	position:absolute;
}
.scroll.menu{
	
	overflow: auto;
	height: 630px;

}
li a{

	font-size:20px;
	height:28px;
	
	margin-bottom: 5px;
	padding-left: 15px;
	color: #F2EDED;	
}
.menuitem_ul{
	
}
.tu{


}
</style>
	 <div class="sr-menu" style="width: 25%;float: left;">
	 		<div class="menuCount">title</div>
	 		
 			<div class="scroll menu">
				<ul class="menuitem_ul" category="category" >
					<span title="xxx">xxxx1</span>
					<li>
						<a onclick="funn(this)">aaaaaaa</a><br>
					<li>
					<li>
						<a onclick="funn(this)">aaaaaaa</a><br>
					<li>
					<li>
						<a onclick="funn(this)">aaaaaaa</a><br>
					<li>
				</ul>	 			
				<ul class="menuitem_ul" category="category" >
					<span title="xxx">xxxx2</span>
					<li>
						<a onclick="funn(this)">aaaaaaa</a><br>
						
					<li>
					<li>
						<a onclick="funn(this)">aaaaaaa</a><br>
						
					<li>
				</ul>	 			
				<ul class="menuitem_ul" category="category" >
					<span title="xxx">xxxx3</span>
					<li>
						<a onclick="funn(this)">aaaaaaa</a><br>
						
					<li>
					<li>
						<a onclick="funn(this)">aaaaaaa</a><br>
						
					<li>
					<li>
						<a onclick="funn(this)">aaaaaaa</a><br>
						
					<li>
					<li>
						<a onclick="funn(this)">aaaaaaa</a><br>
						
					<li>
				</ul>	 			
				<ul class="menuitem_ul" category="category" >
					<span title="xxx">xxxx4</span>
					<li>
						<a onclick="funn(this)">aaaaaaa</a><br>
						
					<li>
					<li>
						<a onclick="funn(this)">aaaaaaa</a><br>
						
					<li>
				</ul>	 			
				<ul class="menuitem_ul" category="category" >
					<span title="xxx">xxxx1</span>
					<li>
						<a onclick="funn(this)">aaaaaaa</a><br>
						
					<li>
					<li>
						<a onclick="funn(this)">aaaaaaa</a><br>
						
					<li>
				</ul>	 			
 			</div>
	 		
	 
	 </div>
	 
	 
	 
	<!-- 图表 -->
	<div class="tu" style="width: 75%; height:630px; float: right;">
		<div id ='wordCloud' style="height: 300px;float: none;">1111111111111</div>	
		<div id ='pie' style="height: 300px;">2222222222222222</div>	
	</div>
</div>	
</body>
</html>